{% extends 'mathtesthome.html' %}
{% load crispy_forms_tags %}


{% block body %}
<div class='main-content container'>
    <div class="row">
        <div class='col-sm-6'>
            <h1>预览</h1>
            <hr/>
            <div class='content-preview'>
                <h3 id='preview-title'></h3>
                <p id='preview-content'></p>
            </div>
        </div>
        <div class='col-sm-6'>
            <h1>内容</h1>
            <hr/>

            <form method='POST' action='' enctype='multipart/form-data'>{% csrf_token %}
                {{ form|crispy }}
                <input type='submit' class='btn btn-default' value='{{buttonname}}'/>
            </form>
        </div>
    </div>
</div>

{% endblock %}


{% block extendscript%}
<style>
    #id_topic {
    width: 100%;
    height: 100%;
}
</style>
<script src='https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.5/marked.min.js'></script>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' >
{{ form.media }}
<script type="text/javascript">
$(document).ready(function(){
    $(".content-markdown").each(function(){
            var content = $(this).text()
            var markedContent = marked(content)
            $(this).html(markedContent)
    })
    $(".post-detail-item img").each(function(){
            $(this).addClass("img-responsive");
    })



    var contentInput = $("#id_process");
    console.log(contentInput)

    function setContent(value){
        var markedContent = marked(value)
        $("#preview-content").html(markedContent)
        $("#preview-content img").each(function(){
            $(this).addClass("img-responsive")
        })
    }
    setContent(contentInput.val())

    contentInput.keyup(function(){
        var newContent = $(this).val()
        setContent(newContent)
    })

    var titleInput = $("#id_expresstion");



    function setTitle(value) {
        $("#preview-title").text(value)
    }
    setTitle(titleInput.val())

    titleInput.keyup(function(){
        var newContent = $(this).val()
        setTitle(newContent)
    })

    $(".comment-reply-btn").click(function(event){
        event.preventDefault();
        $(this).parent().next(".comment-reply").fadeToggle();
    })


    // preview-title
    // preview-content

})


</script>
{% endblock %}